<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui-v2.4.3/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*顶部导航右侧居右*/
        .item-right {
            float: right;
        }

        /*设置左侧导航高度铺满*/
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .hight-fill {
            height: 100%;
        }

        .content-fill {
            /*min-width: 200px;*/
            width: 100%;
            height: 100%;
        }
    </style>

    <script src="../../layui-v2.4.3/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use('element', function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //监听导航点击
            element.on('nav(demo)', function (elem) {
                console.log(elem.text())
            });
        });
    </script>
</head>
<body>

<!--顶部导航-->
<ul class="layui-nav">
    <!--左侧导航栏-->
    <li class="layui-nav-item"><a href="#">导航1</a></li>
    <li class="layui-nav-item layui-this">
        <a href="#">导航2</a>
        <dl class="layui-nav-child">
            <dd><a href="#">导航2-选项1</a></dd>
            <dd><a href="#">导航2-选项2</a></dd>
            <dd><a href="#">导航2-选项3</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="#">导航3</a></li>
    <li class="layui-nav-item">
        <a href="#">导航4</a>
        <dl class="layui-nav-child">
            <dd><a href="#">导航4-选项1</a></dd>
            <dd><a href="#">导航4-选项2</a></dd>
            <dd class="layui-this"><a href="#">导航4-选项3</a></dd>
            <dd><a href="#">导航4-选项4</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="#">导航5</a></li>

    <!--右侧导航栏-->
    <li class="layui-nav-item  item-right" lay-unselect="">
        <a href="#"><img src="head.jpg" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="#">修改信息</a></dd>
            <dd><a href="#">安全管理</a></dd>
            <dd><a href="#">退了</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item  item-right">
        <a href="#">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item item-right">
        <a href="#">控制台<span class="layui-badge">9</span></a>
    </li>
</ul>

<div class="layui-row hight-fill">
    <div class="layui-col-xs2 hight-fill">
        <!--左侧导航-->
        <ul class="layui-nav layui-nav-tree layui-inline content-fill" lay-filter="demo"
            style="margin-right: 10px;">
            <li class="layui-nav-item layui-nav-itemed">
                <a href="#">默认展开</a>
                <dl class="layui-nav-child">
                    <dd><a href="#">选项一</a></dd>
                    <dd><a href="#">选项二</a></dd>
                    <dd><a href="#">选项三</a></dd>
                    <dd><a href="#">跳转项</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="#">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="#">移动模块</a></dd>
                    <dd><a href="#">后台模版</a></dd>
                    <dd><a href="#">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#">云市场</a></li>
            <li class="layui-nav-item"><a href="#">社区</a></li>
        </ul>
    </div>
    <div class="layui-col-xs10 hight-fill">
        <!--中间内容面板-->
        <div class="content-fill">
            <table class="layui-hide content-fill" id="test" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                </div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script>
                layui.use('table', function () {
                    var table = layui.table;

                    table.render({
                        elem: '#test'
                        , url: 'demo1.json'
                        , toolbar: '#toolbarDemo'
                        , title: '用户数据表'
                        , cols: [[
                            {type: 'checkbox', fixed: 'left'}
                            , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                            , {field: 'username', title: '用户名', width: 120, edit: 'text'}
                            , {
                                field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                                    return '<em>' + res.email + '</em>'
                                }
                            }
                            , {field: 'sex', title: '性别', width: 80, edit: 'text', sort: true}
                            , {field: 'city', title: '城市', width: 100}
                            , {field: 'sign', title: '签名'}
                            , {field: 'experience', title: '积分', width: 80, sort: true}
                            , {field: 'ip', title: 'IP', width: 120}
                            , {field: 'logins', title: '登入次数', width: 100, sort: true}
                            , {field: 'joinTime', title: '加入时间', width: 120}
                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                        ]]
                        , page: true
                    });

                    //头工具栏事件
                    table.on('toolbar(test)', function (obj) {
                        var checkStatus = table.checkStatus(obj.config.id);
                        switch (obj.event) {
                            case 'getCheckData':
                                var data = checkStatus.data;
                                layer.alert(JSON.stringify(data));
                                break;
                            case 'getCheckLength':
                                var data = checkStatus.data;
                                layer.msg('选中了：' + data.length + ' 个');
                                break;
                            case 'isAll':
                                layer.msg(checkStatus.isAll ? '全选' : '未全选');
                                break;
                        }
                        ;
                    });

                    //监听行工具事件
                    table.on('tool(test)', function (obj) {
                        var data = obj.data;
                        //console.log(obj)
                        if (obj.event === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                obj.del();
                                layer.close(index);
                            });
                        } else if (obj.event === 'edit') {
                            layer.prompt({
                                formType: 2
                                , value: data.email
                            }, function (value, index) {
                                obj.update({
                                    email: value
                                });
                                layer.close(index);
                            });
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>

</body>
</html>
